<template>
  <div class="nav">
    <div class="nav-left">
      <img src="../assets/img/admin.svg" alt="" width="230px" height="50px" >
    </div>
    <div class="nav-right">
      <img src="../assets/img/hua.jpg" alt="" width="50" height="50px" >
    </div>
    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
           {{userName}}
         <i class="el-icon-caret-bottom"></i>
      </span>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
name: "Header",
  computed:{
    userName(){
      return localStorage.getItem('userName');
    }
  },
  methods:{
    handleCommand(command){
      if(command == "logout"){
        localStorage.removeItem('userName');
        this.$router.push("/");
      }
    }
  }
}
</script>

<style scoped>
.nav{
  width: 100%;
  height: 70px;
  background-color: #334256;
  display: flex;
  line-height: 70px;
  position: relative;
}
.nav-left{
  position: absolute;
  left: 20px;
}
.nav-left img{
  margin-top: 10px;
}
.nav-right {
  position: absolute;
  right: 70px;
  top: 10px ;
}
.nav-right img{
  box-sizing: border-box;
  border-radius: 50%;
}
.user-name{
  position: absolute;
  right: 8px;
  top: 2px;
}
.el-dropdown-link{
  color: #fff;
}

</style>